<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>位移运动-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			body{
				padding:200px 100px;
			}
			#wrap{
				width: 300px;
				height: 20px;
				border-radius: 60px;
				background: orange;
				position: relative;
			}
			#main{
				width: 0px;
				height: 100%;
				background: orangered;
				border-radius: 60px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="main"></div>
		</div>
		<script type="text/javascript">
			function dom(id){
				return document.getElementById(id);
			}
			function log(msg){
				return console.log(msg);
			}
			window.onload = function(){
				var sped = 2;
				var mDom = dom("main");
				var mleft = mDom.offsetWidth;
				setInterval(function(){
					
					var cWith = mleft += sped;
					mDom.style.width = cWith + "px";
				},50)
			}
		</script>
	</body>
</html>
